Skip to content

fix(design-sync): P1/P2 fixes from claude.ai/design review#627

Merged
BigSimmo merged 1 commit into
mainfrom
claude/design-sync-fixes-p1
Jul 14, 2026
Merged

fix(design-sync): P1/P2 fixes from claude.ai/design review#627
BigSimmo merged 1 commit into
mainfrom
claude/design-sync-fixes-p1

Conversation

@BigSimmo

@BigSimmo BigSimmo commented Jul 13, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Owner

Summary

Implements Part 1 of the July 2026 design-side review (CLAUDE_CODE_FIXES.md): fixes to the design-sync inputs plus two small source fixes, then a verified re-sync to the Clinical KB Design System project.

  • P1 — stub type declarations: all 10 synced components now ship real prop contracts via dtsPropsFor (was [key: string]: unknown)
  • P1 — --text-hero misparse: added the Tailwind v4 --text-hero--line-height companion (1.15) so tooling can't read the clamp() size as a font-family; the only call site sets explicit leading-[1.05], so no visual change
  • P2 — icon crash: PanelHeading/EmptyState icon is now optional (icon tile skipped when absent) + no-icon preview stories proving it renders
  • P2 — no usable icons: the bundle re-exports a curated 35-icon lucide set; conventions header now tells the design agent to import icons from the package, never lucide-react
  • P3 — non-self-contained example: AccessibleTable primary example inlines its data
  • P2/P3 accepted findings (--tw-* scoped vars, pseudo theme scopes, README token-count difference) recorded in .design-sync/NOTES.md as validator heuristics, per the review's own audit

Verification

  • verify:cheap green (lint, typecheck, 2197 vitest, type-scale/icon-scale/brand checks)
  • Re-sync driver clean: render check 10/10, zero flags, all 29+2 preview cells graded good; changed components re-captured and re-verified
  • Uploaded to the design project and re-anchored; .d.ts/icons/prompt.md fixes confirmed in the uploaded output

Part 2 of the review (E1–E6 design-elevation refactor) is deliberately not in this PR — it is an app-wide token migration program, assessed separately.

Clinical governance preflight

Not applicable — UI primitives + design-sync config only; no ingestion, answer generation, search/ranking, source governance, document access, privacy, or production env changes.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Panel headings and empty states can now appear without icons for cleaner, more flexible layouts.
    • Added icon-free examples for recent searches and empty pinned-content states.
    • Expanded the available icon set for consistent use across the design system.

  • Documentation

    • Updated icon usage guidance and clarified supported icons.
    • Documented accepted design validation findings and tooling compatibility guidance.

  • Refactor

    • Simplified table preview data configuration without changing its visible content.

@BigSimmo @claude
fix(design-sync): P1/P2 fixes from claude.ai/design review
8103c56 
- Real prop contracts for all 10 synced components via dtsPropsFor
  (was: [key: string]: unknown stubs)
- PanelHeading/EmptyState: icon prop now optional (no crash when omitted);
  no-icon preview stories added
- Bundle re-exports a curated lucide icon set (consumers have no
  lucide-react); conventions updated to import icons from the package
- --text-hero--line-height companion token marks --text-hero as a
  font-size token (stops font-family misparse downstream)
- AccessibleTable prompt example now self-contained (inlined data)
- NOTES.md records accepted design-validator heuristics (--tw-* vars,
  pseudo theme scopes, token-count difference)

verify:cheap green (lint, typecheck, 2197 tests). Re-synced and
re-verified: render check 10/10 clean, all cells graded good.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@supabase

supabase Bot commented Jul 13, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitai Bot commented Jul 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: dcbccd69-dddd-4214-9f18-2674e426a724

📥 Commits

Reviewing files that changed from the base of the PR and between abba3c7 and 8103c56.

📒 Files selected for processing (9)
  • .design-sync/NOTES.md
  • .design-sync/config.json
  • .design-sync/conventions.md
  • .design-sync/entry.tsx
  • .design-sync/previews/AccessibleTable.tsx
  • .design-sync/previews/EmptyState.tsx
  • .design-sync/previews/PanelHeading.tsx
  • src/app/globals.css
  • src/components/ui-primitives.tsx
📝 Walkthrough

Walkthrough

The design sync bundle now exports curated icons, supports iconless PanelHeading and EmptyState usage, records explicit component prop metadata, updates previews and conventions, and adds a hero typography line-height companion token with validator notes.

Changes

Design sync component and tooling updates

Layer / File(s) Summary
Icon API and previews
.design-sync/entry.tsx, src/components/ui-primitives.tsx, .design-sync/previews/*, .design-sync/conventions.md		 The bundle re-exports curated icons; PanelHeading and EmptyState accept optional icons; iconless previews and updated icon guidance are added.
Sync prop metadata and table preview
.design-sync/config.json, .design-sync/previews/AccessibleTable.tsx		 Component prop type metadata is added, and clinical table rows and columns are inlined into the preview.
Typography tooling compatibility
src/app/globals.css, .design-sync/NOTES.md		 A --text-hero--line-height companion token and accepted validator findings are documented.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

  • BigSimmo/Database#517: Both changes update the shared --text-hero typography token in src/app/globals.css.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title is concise and accurately summarizes the main design-sync review fixes in the change set.
Description check ✅ Passed The description includes the required Summary, Verification, and Notes sections and provides sufficient detail for the PR.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/design-sync-fixes-p1

Comment @coderabbitai help to get the list of available commands.

@BigSimmo
BigSimmo merged commit 77cb0d0 into main Jul 14, 2026
16 checks passed
@BigSimmo BigSimmo mentioned this pull request Jul 14, 2026
Merged
@BigSimmo
BigSimmo deleted the claude/design-sync-fixes-p1 branch July 14, 2026 09:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@BigSimmo